<template>
	<view>
		<view class="balance_box" :style="{zIndex:'101'}">
			<view class="bottom_balance">
				<!-- <view class="imagess" v-if="flag">
    			<image :src="imgBaseUrl+'food/images/car_ico01.png'" style="width: 100%;height: 100%;"></image>
    			<uni-badge class="uni-badge-left-margin total" :text="3" absolute="rightTop" :offset="[-3, -3]"
    				size="normal">
    			</uni-badge>
    		</view> -->
				<view class="amount">
					<text class="unit" v-if="shopCarPrice.price">¥</text>
					<text class="totalPay" v-if="shopCarPrice.price">{{shopCarPrice.price}}</text>
					<text class="totalReduce" v-if="shopCarPrice.oldPrice">¥{{shopCarPrice.oldPrice}}</text>
				</view>
				<view class="reduction flex align-end">
					<view class="totalReduce"></view>
					<!-- <view class="deliveryFee">配送时间约30分钟</view> -->
				</view>
				<!-- backgroundColor:shopStore.hasShut&&cartStore.curOrderType.type==''&&(shopStore.shutStates=='opens'||shopStore.shutStates=='stops' || shopStore.shutStates=='beyonDdistance')?'#989898':'' -->
				<view class="submitBtn" v-if="props.goodsSells<=0" :style="{backgroundColor:'#989898'}">
					<view>已售罄</view>
				</view>
				<view class="submitBtn"
					:style="{backgroundColor:shopStore.hasShut?(shopStore.shutStates=='opens'&&cartStore.curOrderType.type!=''?'':'#989898'):''}"
					@click="changeMenuCach()" v-else>
					<!-- 'add',{id:'1',source:'goodDetail',action:'add'},'/pages/index/menu/menu' -->
					<view>
						{{shopStore.hasShut?(cartStore.curOrderType.type==''&&shopStore.shutStates=='opens'?'已打烊':(shopStore.shutStates=='stops'?'暂停营业':(shopStore.shutStates=='beyonDdistance'?'超出配送范围':props.type=='dtc'?'立即购买':'加入购物车'))):props.type=='dtc'?'立即购买':'加入购物车'}}
					</view>
				</view>
				<!-- {{shopStore.hasShut&&cartStore.curOrderType.type==''&&shopStore.shutStates=='opens'?'已打烊':(shopStore.hasShut&&cartStore.curOrderType.type==''&&shopStore.shutStates=='stops'?'暂停营业':(shopStore.hasShut&&cartStore.curOrderType.type==''&&shopStore.shutStates=='beyonDdistance'?'超出配送范围':'加入购物车'))}} -->
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref } from "vue";
	import { env } from '@/api/env.js';
	import { useShopStore } from '@/stores/shopStore';
	import { useCartStore } from '@/stores/cartStore';
	const cartStore = useCartStore();
	const shopStore = useShopStore();
	const emit = defineEmits(["addCar"])
	const props = defineProps({
		type: {
			type: String,
			default: ''
		},
		flag: {
			type: Boolean,
			default: false
		},
		shopCarPrice: {
			type: Object,
			default: {}
		},
		goodsSells:{
			type:Number,
			default:1
		}
	})
	const imgBaseUrl = ref(env.FileUrl)
	// type : string, obj : any, url : string
	const changeMenuCach = () => {
		// if(shopStore.hasShut){
		// 	if(shopStore.shutStates=='opens'&&cartStore.curOrderType.type!=''){

		// 	}else{
		// 		return
		// 	}
		// }
		if (shopStore.hasShut && !(shopStore.shutStates === 'opens' && cartStore.curOrderType.type !== '')) {
			return;
		}

		emit("addCar")
	}
</script>

<style lang="scss">
	.balance_box {
		width: 722rpx;
		height: 158rpx;
		position: fixed;
		bottom: 20rpx;
		left: 16rpx;
		z-index: 101;

		.bottom_balance {
			width: 100%;
			height: 98rpx;
			border-radius: 104rpx;
			background: #231F20;
			box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(0, 0, 0, 0.30);
			position: absolute;
			bottom: 0rpx;
			left: 0rpx;
			display: flex;
			align-items: center;

			.imagess {
				width: 100rpx;
				height: 100rpx;
				position: relative;
				bottom: 30rpx;
				left: 10rpx;
			}

			.total {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				// background: #FC4C40;
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 28rpx;
				font-style: normal;
				font-weight: 400;
				text-align: center;
				line-height: 40rpx;
			}
		}

		.amount {
			min-width: 165rpx;
			height: 76rpx;
			margin-left: 25rpx;

			.unit {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 14px;
				font-style: normal;
				font-weight: 700;
				line-height: 90rpx;
			}

			.totalPay {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 60rpx;
				font-style: normal;
				font-weight: 700;
				margin-left: 8rpx;
			}
		}

		.reduction {
			height: 60rpx;

			.deliveryFee {
				color: #FFF;
				font-family: "Microsoft YaHei UI";
				font-size: 24rpx;
				font-style: normal;
				font-weight: 400;
				opacity: .6;
			}
		}

		.submitBtn {
			width: 202rpx;
			height: 92rpx;
			border-radius: 36px;
			background: #53A87F;
			text-align: center;
			line-height: 92rpx;
			color: #FFF;
			font-family: "Microsoft YaHei UI";
			font-size: 28rpx;
			font-style: normal;
			font-weight: 700;
			margin-left: auto;
			margin-right: 5rpx;
		}
	}

	.totalReduce {
		color: #FFF;
		font-family: "Microsoft YaHei UI";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		text-decoration: line-through;
		margin-top: -5rpx;
		margin-left: 15rpx;
	}
</style>